<script setup lang="ts">
import Cell from "@/components/cell/cell.vue";
import CellFt from "@/components/cell/cell-ft.vue";
import CellBd from "@/components/cell/cell-bd.vue";
import { ref } from "vue";

const isShowNav = ref<Boolean>(false);
const toggleNav = () => {
  isShowNav.value = !isShowNav.value;
};
</script>

<template>
  <div class="header" :class="isShowNav ? 'show-nav' : ''">
    <cell class="layout">
      <cell-bd class="logo-wrap">
        <img class="logo" src="../../assets/images/home/2.png" alt="" />
      </cell-bd>
      <cell-ft @click="toggleNav">
        <img class="more" src="../../assets/images/home/more.png" alt="" />
      </cell-ft>
    </cell>
    <ul class="nav">
      <li>首页</li>
      <li>解决方案</li>
      <li>赋能业务</li>
      <li>关于我们</li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.header{
    position: relative;
    width: 750px;
    height: 97px;
    background: rgba(0,0,0,0.9);
    &.show-nav{
      .nav{
        display: block;
        //opacity: 1;
        //z-index: 10;
        //height: auto;
      }
      .more{
        transform: rotate(-90deg);
      }
    }
    .layout{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        font-size: 32px;
        color: #fff;
      padding: 0px 50px;
      .logo-wrap{
        font-size: 0;
        .logo{
          height: 36px;
        }
      }
      .more{
        width: 29px;
        transition: all 0.3s ease-in-out;
      }
    }
    .nav{
      position: absolute;
      top: 97px;
      width: 750px;
      background: rgba(0,0,0,0.5);
      padding: 20px 50px;
      display: none;
      z-index: 10;
      //opacity: 0;
      //z-index: -1;
      //height: 0;
      transition: all 0.3s ease-in-out;
      li{
        font-size: 28px;
        color: #fff;
        padding: 10px;
      }
    }
}
</style>
